<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>公共网盘</title>
    <!-- 引入网盘界面的样式文件 from 文件.html-->
    <link rel="stylesheet" href="css/netdisk.css">

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/fontawesome/css/all.min.css" rel="stylesheet">
    <link href="css/tooltip/css/tooltip2.css" rel="stylesheet">
    <title>Title</title>
    <style>
        body{
            height: 100%;
            font-family: SFUIText,PingFangSC-Regular,Helvetica Neue,Helvetica,Arial,sans-serif;
            color: #333;
            background-color: #fff;
            -webkit-appearance: none;
            font-size: 14px;
        }
        h1,h2,h3,h4,ul,body,p{
            margin: 0;
            padding: 0;
        }
        div{
            display: block;
        }
        a{
            background: transparent;
            text-decoration: none;
            -webkit-tap-highlight-color: transparent;
            color: #05082c;
            cursor: pointer;
        }
        a:hover{
            text-decoration: none;
        }
        li{
            list-style: none;
            display: list-item;
            text-align: -webkit-match-parent;
        }
        img{
            border: 0;
        }

    </style>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <!--引入Vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!--引入axios-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

</head>
<body>
<div>
    <div id="modules" class="modules" >
    <!--  公共网盘模块 开始  -->
    <div class="private" style="padding-top: 25px">
        <section class="row">
            <div  class="col-md-2" style="width: 15%;">
                <ul id="left">
                    <li @click="changeTypeFilter('全部文件')">
                        <a href="javascript:void(0);" style="background-color: #eef9fe;" >
                                    <span style="color:#09aaff;">
                                        <span><i class="fa fa-bars" aria-hidden="true"></i></span>
                                        <span style="margin-left: 10px;color: #06a7ff;" >公共文件</span>
                                    </span>
                        </a>
                    </li>

                    <li @click="changeTypeFilter('图片')">
                        <a href="javascript:void(0);">
                                    <span class="text">
                                        <span><i class="fa fa-area-chart" aria-hidden="true"></i></span>
                                        <span style="margin-left: 10px;" >图片</span>
                                    </span>
                        </a>
                    </li>

                    <li @click="changeTypeFilter('文档')">
                        <a href="javascript:void(0);" >
                                    <span class="text">
                                        <span><i class="fa fa-file-o" aria-hidden="true"></i></span>
                                        <span style="margin-left: 10px;" >文档</span>
                                    </span>
                        </a>
                    </li>

                    <li @click="changeTypeFilter('视频')">
                        <a href="javascript:void(0);">
                                    <span class="text">
                                        <span><i class="fa fa-play" aria-hidden="true"></i></span>
                                        <span style="margin-left: 10px;" >视频</span>
                                    </span>
                        </a>
                    </li>

                    <li @click="changeTypeFilter('音乐')">
                        <a href="javascript:void(0);">
                                    <span class="text">
                                        <span><i class="fa fa-music"></i></span>
                                        <span style="margin-left: 10px;" >音乐</span>
                                    </span>
                        </a>
                    </li>

                    <li @click="changeTypeFilter('其它')">
                        <a href="javascript:void(0);">
                                    <span class="text">
                                        <span><i class="fa fa-ellipsis-h"></i></span>
                                        <span style="margin-left: 10px;" >其它</span>
                                    </span>
                        </a>
                    </li>

                    <li>
                        <a href="">
                                    <span class="text">
                                        <span><i class="fa fa-comment-o" aria-hidden="true"></i></span>
                                        <span style="margin-left: 10px;">我的分享</span>
                                    </span>
                        </a>
                    </li>

                    <li>
                        <a href="">
                    <span class="text">
                        <span><i class="fa fa-trash" aria-hidden="true"></i></span>
                        <span style="margin-left: 10px;">回收站</span>
                    </span>
                        </a>
                    </li>

                    <li>
                        <a href="">
                    <span class="text">
                        <span><i class="fa fa-archive" aria-hidden="true"></i></span>
                        <span style="margin-left: 10px;">收集文件</span>
                    </span>
                        </a>
                    </li>
                </ul>
            </div>

            <div  class="col-md-10" style="float: left;width: 55%;"  >


                <div class="all" style="width: 100%;">
                    <div id="all_left" style="width:10%; height: 40px;line-height: 40px;"><span>{{typeFilter}}</span></div>
                    <div id="searcher" style="width: 20%;height: 40px;line-height: 20px;float: left;height: 40px;">
                        <input  v-model="searchKeyword" style="width: 95%;height: 25px;margin-top: 7px;" type="text"placeholder="搜索...">
                    </div>
                    <div id="all_right" style="width:20%; float: left;height: 40px;line-height: 40px;"><span>已加载文件:{{priFile_arr.length}}个</span><span class="fa fa-server" style="padding-left: 5px;font-size: 15px"></span></div>
                    <div id="top_1"  style=" float: right;width: 35%;height: 24px;margin-top: 8px;">

                        <button class="button" style="position: relative;overflow: hidden;" >
                            <i class="fa fa-upload"></i>
                            <span>上传</span>
                            <form id="submitFile">
                                <input v-on:input="upload()" name="file" type="file" style="position: absolute;opacity: 0.0;top: -25px;left: -25px;font-size: 50px;">
                            </form>
                        </button>

                        <button class="button">
                            <i class="fa fa-share"></i>
                            <span>分享</span>
                        </button>

                        <button class="button">
                            <i class="fa fa-download"></i>
                            <span>下载</span>
                        </button>
                    </div>
                </div>
                <hr>

                <!--  文件列表  -->
                <div class="all_2">
                    <table>
                        <tr>
                            <th><div style="display: inline-block;width: 100px;height: 51px;"><input type="checkbox"style="margin:0;padding-top: 2px"><span>全选</span></div></th>
                            <th><span style="display: inline-block;width: 120px;height: 51px;">文件名</span></th>
                            <th><span style="display: inline-block;width: 120px;height: 51px;">大小</span></th>
                            <th><span style="display: inline-block;width: 120px;height: 51px;">类型</span></th>
                            <th><span style="display: inline-block;width: 120px;height: 51px;">操作</span></th>
                            <th><span style="display: inline-block;width: 120px;height: 51px;">访问级别</span></th>
                        </tr>
                        <tr v-for="f in priFile_arr" v-if="f.fname.includes(searchKeyword)&&(f.type==typeFilter||typeFilter=='全部文件')" @click="clickLine(f)">
                            <td><input type="checkbox"style="margin:0;padding-top: 2px"></td>
                            <td>{{f.fname}}</td>
                            <td>{{f.size}}Byte</td>
                            <td>{{f.type}}</td>
                            <td>
                                <a href="" @click="del(f.fid)">删除</a>
                                <a :href="f.path" :download="f.fname" @click="download(f.fid)">下载</a>
                            </td>
                            <td>
                                <a v-if="f.status!=2" @click="changeStatus(2,f.fid)">公开</a>
                                <a v-if="f.status!=1" @click="changeStatus(1,f.fid)">仅好友</a>
                                <a v-if="f.status!=0" @click="changeStatus(0,f.fid)">私密</a>
                            </td>
                        </tr>
                    </table>

                </div>
            </div>

            <!--  文件详细信息  -->
            <div  v-cloak id="fileInfo" class="button_right" style="float: left;width: 30%;">
                <div style="width: 240px; height: 31px;padding-bottom: 15px;color:#03081a;font-size: 14px;font-weight: bold">
                    文件详情
                </div>
                <div id="aa" v-if="showDetails==0">
                    <img src="https://nd-static.bdstatic.com/m-static/v20-main/img/empty-folder.55c81ea2.png" alt=""style="width:60px;height: 60px;margin-left: 20px">
                    <p style="color: #878c9c;font-size: 14px">选中文件,查看详情</p>
                </div>
                <table v-if="showDetails==1">
                    <tr><td>名称:</td><td>{{file.fname}}</td></tr>
                    <tr><td>类型:</td><td>{{file.type}}</td></tr>
                    <tr><td>大小:</td><td>{{file.size}}ByteByte</td></tr>
                    <tr><td>访问级别:</td><td v-if="file.status==0">私密</td><td v-else-if="file.status==1">仅好友</td><td v-else>公开</td></tr>

                    <tr><td>首次上传者:</td><td>{{file.upNick}}</td></tr>
                    <tr><td>首次上传时间:</td><td>{{file.upTime}}</td></tr>
                    <tr><td>被下载次数</td><td>{{file.downTimes}}</td></tr>
                    <tr><td>拥有用户数:</td><td>{{file.quantity}}</td></tr>
                    <tr><td>父级目录</td><td v-if="file.ffname==null">无</td><td v-else>{{file.ffname}}</td></tr>
                </table>
            </div>
        </section>
    </div>
    <!--  公共网盘模块 结束  -->
        </div>
</div>







<script src="js/utils.js"></script>
<!--网盘相关js-->
<script src="js/netDisk.js"></script>

</body>
</html>